<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
    </head>

    <body>
        <div id="app">
            <el-tabs value='config'>
                <el-tab-pane label="基本信息" name="rbasic">
                    <hc-rule-basic :ruledef='ruleDef'></hc-rule-basic>
                </el-tab-pane>
                <el-tab-pane label="规则配置" name="config">
                    <el-form label-width="100px" label-position='top'>
                        <el-form-item label="脚本内容">
                            <hc-groovy-editor :panel='false' v-model="ruleDef.script" :minlines='12' :maxlines='40'></hc-groovy-editor>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click='triggerUpdateRuleEvent'>保存修改</el-button>
                            &nbsp;&nbsp;
                            <el-button plain type="danger" @click='triggerDeleteRuleEvent'>删除规则</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="规则测试" name="test">
                    <hc-test :rpath="ruleDef.rpath" :inputs='ruleDef.rtest' @save-inputs="ruleDef.rtest = $event"></hc-test>
                </el-tab-pane>
            </el-tabs>
        </div>

        <script src="/lib/ace-noconflict/ace.js"></script>
        <script src="/lib/ace-noconflict/ext-language_tools.js"></script>
        <link rel="stylesheet" href="/com/hc-groovy-editor.css" />
        <link rel="stylesheet" href="/com/hc-lang-editor.css"/>
        <script type='module'>
            import * as $util from '/lib/hc-util.js'
            import * as $rest from '/lib/hc-rest-service.js'
            import {} from '/com/hc-test.js'
            import {} from '/com/hc-rule-basic-properties.js'
            import {} from '/com/hc-groovy-editor.js'
            
            $rest.check$pinfoOrLoad(function() {
                $rest.obtainRuleDefByRpath($util.getUrlArgOrDefault('rpath','xsxdjc/class9/是否优质画像'), initvm);
            }, 'xsxdjc/Main');

            function initvm(ruleDef) {
                window.vm = new Vue({
                    el: '#app',
                    data: {
                        ruleDef: ruleDef
                    },
                    methods: {
                        triggerUpdateRuleEvent: function() {
                            $rest.updateRuleDefInVm(this)
                        },
                        triggerDeleteRuleEvent: function() {
                            $rest.deleteRuleDefInVm(this)
                        }
                    }
                });
            };
        </script>
    </body>

</html>
